<template>
	<div>
		<div class="title">{{title}}</div>
		<div class="chaptername" v-for="item of chapters" :key='item.c_id'>
			<div><router-link class="content" :to="{path:'/content',query:{title:item.c_title}}">{{item.c_title}}</router-link></div>
		</div>
	</div>
	
</template>

<script>
import axios from 'axios'
export default{
  name:"Chapter",
  data (){
	return {
	  chapters:[],
	  title:''
	}
  },
  methods:{
  		getChapters(){
  			// var title = this.title
			var id = this.$route.query.id;
			var title = this.$route.query.title;
			this.title = title;
			// console.log(title)
  			axios.post(('http://localhost:3000/api/user/chapter'), {
  			  // username: name,
  			  // password: password
  			  // title:title
			  id:id
  			}, {}).then((response) => { 
  				// console.log(response.data); 
  				
  				// var a = JSON.stringify(response.data);
  				// console.log('a:'+response.data[2])
  				
  				// console.log('a:'+JSON.stringify(response.data[2]))
  				var d = []
  				for(var i = 0;i < response.data.length;i++){
  					var dat = JSON.stringify(response.data[i])
  					// console.log(dat)
  					var dat2 = JSON.parse(dat)
  					// console.log(dat2)
  					d.push(dat2)
  					// console.log(d)
  				}
  				var c= this.chapters = d
  				// console.log(c)
  			})
  		}
  },
  mounted(){
  	this.getChapters();
  }
}

</script>

<style scoped="scoped">
	.title{
		padding-top: 80px;
		padding-bottom: 20px;
		font-size: 25px;
		font-weight: 600;
		text-align: center;
	}
	.chaptername{
		width: 100%;
		padding-left: 46px;
	}
	.content{
		color: #000000;
	}
	.chaptername div{
		width: 30%;
		height: 30px;
		line-height: 30px;
		margin-left: 5px;
		margin-top: 6px;
		font-size: 16px;
		font-weight: 500;
		text-align: center;
		background: #e4e4e4;
		float: left;
		cursor: pointer;
	}
	.chaptername div:hover{
		background: #CCCCCC;
	}
</style>
